<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  <title>试卷列表</title>
  <th:block th:include="common/public::layui"></th:block>
</head>
<body>
<div class="layui-col-md12" style="text-align: center">
  <form class="layui-form layui-form-pane" action="" style="margin-top: 15px;display: inline-block">
    <div class="layui-form-item">
      <label class="layui-form-label">试卷查询</label>
      <div class="layui-input-inline" style="margin-right: 0">
        <input type="text" name="title" id="title" placeholder="请输入试卷名称" autocomplete="off" class="layui-input"/>
        <input type="hidden" name="answerType" class="layui-input" th:value="${answerType}"/>
      </div>
      <div class="layui-input-inline" style="width: auto">
        <button class="layui-icon layui-icon-search layui-btn" lay-submit="" lay-filter="*"></button>
      </div>
    </div>
  </form>
</div>

<div class="layui-col-md-offset2 layui-col-md8">
  <table class="layui-table" lay-data="{page:true, id:'table'}" lay-filter="table">
    <thead>
    <tr>
      <th lay-data="{field:'id',minWidth:100}">ID</th>
      <th lay-data="{field:'title',minWidth:300}">试卷名称</th>
      <th lay-data="{field:'answerTime',minWidth:100,templet:'<div>{{d.answerTime}}分</div>'}">答题时间</th>
      <th lay-data="{field:'createTime',minWidth:200}">创建时间</th>
      <th lay-data="{toolbar:'#tool',width:140}">操作</th>
    </tr>
    </thead>
  </table>
</div>
<script type="text/html" id="tool">
  <a class="layui-btn layui-btn-xs" lay-event="study">编辑</a>
  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="study">删除</a>
</script>
<script th:inline="javascript">
  layui.use(['jquery', 'table', 'form'], function () {
    var answerType = [[${answerType}]];
    var $ = layui.$;
    var table = layui.table;
    var form = layui.form;
    //初始加载
    loadTable({answerType: answerType});
    //操作列点击事件
    table.on('tool(table)', function (obj) {
      if (obj.event == 'study') {
        location.href = prefixUrl + '/answer/study/' + obj.data.id;
      }
    });
    //  表单提交事件
    form.on('submit(*)', function (data) {
      loadTable(data.field);
      return false;
    });

    //表格加载
    function loadTable(data) {
      table.reload('table', {
        url: prefixUrl + '/answerCard/getAll',
        where: data,
        done: function (res, curr, count) {
          //合并考试时间行
          mergeRow($, 'answerTime');
        }
      });
    }
  });
</script>
</body>
</html>